<template>
    <div>
      <div class="plan-title q-mb-md">设备信息</div>
      <div class="page-content">
          <q-table :data="tableData"
                       :columns="columns"
                       row-key="id"
                       class="myTable scroll stick-to-top inherit"
                       :loading="isTableLoading"
                       :pagination.sync="pagination"
                       style="max-height: 350px; margin: 0"
                       no-data-label="暂无数据"
                       :hide-bottom="tableData.length > 0"
                       color="primary">
          <template v-slot:body-cell-index="props">
            <q-td>
              {{props.row.__index + 1}}
            </q-td>
          </template>
          <template v-slot:body-cell-deviceTypeName="props">
            <q-td>
              {{props.row.deviceTypeName | toHorizontalLine }}
            </q-td>
          </template>
          <template v-slot:body-cell-model="props">
            <q-td>
              {{props.row.model | toHorizontalLine }}
            </q-td>
          </template>
            <template v-slot:no-data>
                  <div class="full-width row flex-center font-size-14" style="color: #999">
                    暂无数据
                  </div>
              </template>
          </q-table>
    </div>
</div>
</template>
<script>
export default {
  name: 'device-table',
  data () {
    return {
      isTableLoading: false,
      tableData: [],
      pagination: {
        rowsPerPage: 0
      },
      columns: [
        { name: 'index', label: '序号', align: 'left', field: 'index' },
        { name: 'assetNumber', label: '设备编号', align: 'left', field: 'assetNumber' },
        { name: 'name', label: '设备名称', align: 'left', field: 'name' },
        { name: 'deviceTypeName', label: '设备类型', align: 'left', field: 'deviceTypeName' },
        { name: 'model', label: '设备型号', align: 'left', field: 'model' },
        { name: 'workShopName', label: '所在车间', align: 'left', field: 'workShopName' }
      ]
    }
  },
  methods: {
    initData (val) {
      this.tableData = val
    }
  }
}
</script>
